<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>js实现audio进度条制作</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
</head>
<style>
    .container-fluid{
        padding-right: 0px;
        padding-left: 0px;
    }
    .col-xs-1,.col-xs-2,.col-xs-3,
    .col-xs-4,.col-xs-5,.col-xs-6,
    .col-xs-7,.col-xs-8,.col-xs-9,
    .col-xs-10,.col-xs-11,.col-xs-12{
        padding: 0px;
        margin: 0px;
    }
    .row{
        padding: 0px;
        margin: 0px;
    }


    .postcss{
        position: absolute;
        z-index: 1000;
        top:1%;

    }

    .videogong {
        margin-top: 22%;
    }
    .imggong{
        /*左右间距*/
        padding-left: 5.5%;
        /*图片最大展示*/
        max-width: 94%;

    }
    /*audio {
        width: 650px;

    }*/


    /*音频样式设置*/
    .audiogong {
        margin-top: -3.5%;
    }

    .mp3Box {
        /* display: flex; */
        /* justify-content: space-between; */
        /*align-items: center;*/
        width: 375px;
        margin-top: 22%;
        margin-left: 6%;
        height: 5rem;
        /* border: 1px solid black; */
        border-radius: 10px;
        max-width: 89%;
        /* padding-left: 5.5%; */
        /* max-width: 94%; */
        padding: 5.5%;
        background: url(img/puhui/yinpin/yinpinbody.png) no-repeat center bottom;
        /* background-size: cover; */
    }

    /*通过媒体查询，适配不同的手机端界面*/
    @media (min-width: 320px) {
        .mp3Box {
            width: 320px;
        }

    }
    @media (min-width: 375px) {
        .mp3Box {
            width: 375px;
        }

    }
    @media (min-width: 390px) {
        .mp3Box {
            width: 390px;
        }

    }
    @media (min-width: 414px) {
        .mp3Box {
            width: 414px;
        }

    }


    .radioBox {
        width: 3.5rem;
        height: 3.5rem;
        margin-top: -1%;
        background: url(img/puhui/yinpin/zanting.png) no-repeat center top;
        background-size: 3.5rem 3.5rem;
    }

    .voice {
        width: 2rem;
        height: 2rem;
        margin-top: 1.2%;
        margin-left: 1%;
        border-radius: 50%;
        background: url(img/puhui/yinpin/voiceon.png) no-repeat center center;
        background-size: 2rem 2rem;
    }
    #yinliang {
        display: none;
        position: relative;
        top: 0.2rem;
        left: -2.14rem;
    }
    .time {
        font-size: 1rem;
        margin-top: 2%;
        margin-left: 2%;
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
    }
    .currentTime{
        color: #896521;
    }
    .duraTime{
        color: white;
    }

    .newprogress {
        /* position: relative; */
        margin-top: 4%;
        margin-left: 3%;
        width: 50%;
        height: 0.5rem;
        background-color: #c1b9b9;
    }
    .newslide {
        position: absolute;
        top: -0.2rem;
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        background-color: #a58e4f;
        z-index: 9;
    }
    .newfill {
        position: absolute;
        top: 0;
        height: 0.5rem;
        background-color: #a58e4f;
    }



</style>


<body>
<div class="container-fluid" >
    <!--背景图-->
    <div class="row">
        <div class="col-xs-12">
            <img src="img/puhui/puhui2/body2.png" class="img-responsive">


        </div>



    </div>

    <!--背景图上的层级-->
    <div class="row postcss">
        <!--音频图片-->
        <div class="col-xs-12 mp3Box">
            <div class="row audiogong">
                <!-- 播放开关 -->
                <div class="col-xs-2 radioBox" onclick="bofan()">
                    <audio id="ado"></audio>
                </div>
                <!-- 进度条 -->
                <div class="col-xs-4 newprogress">
                    <div class="newslide"></div>
                    <div class="newfill"></div>
                </div>
                <!-- 时间 -->
                <div class="col-xs-3 time">
                    <span class="currentTime">00:00</span> /
                    <span class="duraTime">00:00</span>
                </div>
                <!-- 是否静音 -->
                <div class="col-xs-2 voice"></div>


            </div>



        </div>

    </div>

</div>

</body>


<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js" ></script>


<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
    var audio = document.querySelector("#ado");
    // 音频地址
    /*audio.src ="./img/puhui/ceshi.mp3";*/
    audio.src ="./img/yinpin1.mp3";
    audio.controls = false;
    /*循环播放*/
    /* audio.loop = true;*/
    audio.volume = 0.3;
    var rBox = document.querySelector(".radioBox");
    rBox.appendChild(audio);
    //   调整声音是否静音
    var voice = document.querySelector(".voice");
    voice.addEventListener("click", function () {
        if (audio.muted) {
            audio.muted = false;
            voice.style.backgroundImage = "url(img/puhui/yinpin/voiceon.png)";
        } else {
            audio.muted = true;
            voice.style.backgroundImage = "url(img/puhui/yinpin/voiceoff.png)";
        }
    });
    //   播放暂停
    function bofan() {
        if (audio.paused) {
            audio.play();
            rBox.style.backgroundImage = "url(img/puhui/yinpin/bofang.png)";
        } else {
            audio.pause();
            rBox.style.backgroundImage = "url(img/puhui/yinpin/zanting.png)";
        }
    }

    //   获取音频总时长
    if (audio != null) {
        var duration;
        audio.load();
        audio.oncanplay = function () {
            var duraTime = document.querySelector(".duraTime");
            duraTime.innerHTML = transTime(audio.duration);
        };
    }
    //   格式化时间格式
    function transTime(time) {
        let duration = parseInt(time);
        let minute = parseInt(duration / 60);
        let sec = (duration % 60) + "";
        let isM0 = ":";
        if (minute == 0) {
            minute = "00";
        } else if (minute < 10) {
            minute = "0" + minute;
        }
        if (sec.length == 1) {
            sec = "0" + sec;
        }
        return minute + isM0 + sec;
    }
    // 时长进度条
    var newprogress = document.querySelector(".newprogress");
    var newslide = document.querySelector(".newslide");
    var newfill = document.querySelector(".newfill")
    audio.ontimeupdate = function () {
        var l = (audio.currentTime / audio.duration) * 100;
        newslide.style.left = l + "%";
        newfill.style.width = l + "%";
        if (audio.currentTime == 0) {
            newslide.style.left = "0%";
        }

        var currentTime = document.querySelector(".currentTime");
        currentTime.innerHTML = transTime(parseInt(audio.currentTime));

        var duraTime = document.querySelector(".duraTime");
        duraTime.innerHTML = transTime(audio.duration);

        /*如果变化时间时长和总长时间一致执行完毕，播放按钮转换成暂停按钮*/
        var currentTimeObject =transTime(parseInt(audio.currentTime));
        var duraTimeObject =transTime(audio.duration);
        if(currentTimeObject == duraTimeObject){
            rBox.style.backgroundImage = "url(img/puhui/yinpin/zanting.png)";
        }


    };
    // 点击进度条
    newprogress.onmousedown = function (e) {
        var rate = (e.clientX - newprogress.offsetLeft) / this.clientWidth*audio.duration
        audio.currentTime = rate-(newprogress.clientWidth*0.005)
    };
    //进度条拖动
    newslide.onmousedown = function (e) {
        var x = e.clientX - this.offsetLeft; //240
        document.onmousemove = function (e) {
            var jlx = ((e.clientX - x) / newprogress.clientWidth) * 100;
            if (jlx <= 100 && jlx >= 0) {
                newslide.style.left = jlx + "%";

                /*if (jlx == 100) {
                    alert("===="+jlx);
                  rBox.style.backgroundImage = "url(img/puhui/yinpin/zanting.png)";
                }*/
            }

            audio.currentTime = (jlx / 100) * audio.duration;
        };
        document.onmouseup = function (e) {
            document.onmousemove = null;
            document.onmouseup = null;
        };
    };
    newslide.ontouchstart = function (e) {
        var x = e.targetTouches[0].clientX - this.offsetLeft; //240
        document.ontouchmove = function (e) {
            var jlx = ((e.targetTouches[0].clientX - x) / newprogress.clientWidth) * 100;
            if (jlx <= 100 && jlx >= 0) {
                newslide.style.left = jlx + "%";
                /*如果进度条执行完毕，播放按钮转换成暂停按钮*/

            }


            audio.currentTime = (jlx / 100) * audio.duration;
        };
        document.ontouchend = function (e) {
            document.ontouchmove = null;
            document.ontouchend = null;
        };
    };
</script>

</html>

